<html>
    <header>
        <title>@title</title>
        <meta charset="utf-8"/>
	    @css 'assets/site.css'
    </header>
    <body>
        <h1>@title</h1>
        <button>Close the connection</button>
        <ul></ul>
        <script>
         "use strict";
         var button = document.querySelector('button');
         var eventList = document.querySelector('ul');
         const evtSource = new EventSource('/sse');
         evtSource.onerror = function() { console.log("EventSource failed."); };
         console.log(evtSource.withCredentials);
         console.log(evtSource.readyState);
         console.log(evtSource.url);
         evtSource.onopen = function() {
             console.log("Connection to server opened.");
         };
         evtSource.onmessage = function(e) {
             var newElement = document.createElement("li");
             newElement.textContent = "message: " + e.data;
             eventList.appendChild(newElement);
         };
         evtSource.addEventListener("ping", function(e) {
             console.log(e)
             var newElement = document.createElement("li");
             var obj = JSON.parse(e.data);
             newElement.innerHTML = "ping at " + obj.time + ' server data: ' + e.data;
             eventList.appendChild(newElement);
         }, false);
         button.onclick = function() { console.log('Connection closed'); evtSource.close(); };
        </script>
    </body>
</html>
